<div id="pills-rel" class="tab-pane">
  <div class="row">
    <div class="col-12">
      <h6>Selected items</h6>
      <table class="table table-sm table-hover" id="tbl-related-products">
        <thead class="thead-light">
          <tr>
            <th scope="col" width="5%">
              <span class="oi oi-move"></span>
            </th>
            <th scope="col" width="5%">
              <span class="oi oi-sort-ascending"></span>
            </th>
            <th scope="col">Title</th>
            <th scope="col" width="15%">Image</th>
            <th scope="col" width="5%">Showing?</th>
          </tr>
        </thead>
        <tbody class="sortable product-navs" ng-init="">
          <tr
            class="sortable-item"
            ng-repeat="item in $ctrl.product.productNavs track by $index"
          >
            <td style="cursor: grab">
              <span class="oi oi-move"></span>
            </td>
            <td>
              <input
                type="text"
                name="ProductNavs[{{$index}}].Priority"
                value="{{item.priority}}"
                class="item-priority form-control form-control-sm d-inline"
                style="width: 40px"
              />
            </td>
            <td>{{item.relatedProduct.title}}</td>
            <td>
              <a
                href="#"
                ng-if="item.relatedProduct.image!=''"
                data-bs-toggle="modal"
                data-bs-target=".image-preview-modal-lg"
                data-imgsrc="{{item.relatedProduct.image}}"
              >
                <img
                  class=""
                  ng-src="{{item.relatedProduct.image}}"
                  alt="{{item.relatedProduct.title}}"
                  style="max-height: 50px"
                />
              </a>
            </td>
            <td style="position: relative">
              <span
                class="form-check form-switch"
                style="position: absolute; top: 10px"
              >
                <input
                  type="checkbox"
                  class="form-check-input"
                  data-val="{{item.isActived}}"
                  id="ProductNavs_{{item.relatedProductId}}"
                  name="ProductNavs[{{$index}}].IsActived"
                  ng-model="item.isActived"
                  value="{{item.isActived}}"
                />
                <label
                  class="form-check-input"
                  for="ProductNavs_{{item.relatedProductId}}"
                >
                </label>
              </span>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
  <!--activeProducts-->

  <h6>List items</h6>
  <div class="row">
    <div class="col-md-8">
      <div
        class="btn-toolbar mb-3"
        role="toolbar"
        aria-label="Toolbar with button groups"
      >
        <div class="btn-group me-2">
          <button
            type="button"
            class="btn btn-secondary"
            data-bs-toggle="modal"
            data-bs-target=".upload-image-modal-lg"
          >
            <i class="mi mi-Add"></i>
          </button>
        </div>
        <div
          class="btn-group me-2"
          role="group"
          aria-label="Button group with nested dropdown"
        >
          <div class="btn-group" role="group">
            <button
              id="btnGroupDrop1"
              type="button"
              class="btn btn-secondary dropdown-toggle"
              data-bs-toggle="dropdown"
              aria-haspopup="true"
              aria-expanded="false"
            >
              All media types
            </button>
            <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
              <a class="dropdown-item" href="#">All post types</a>
              <a class="dropdown-item" href="#">Images</a>
              <a class="dropdown-item" href="#">Audios</a>
              <a class="dropdown-item" href="#">Videos</a>
              <a class="dropdown-item" href="#">Documents</a>
              <a class="dropdown-item" href="#">Zips</a>
              <a class="dropdown-item" href="#">Others</a>
            </div>
          </div>
        </div>
        <div
          class="btn-group me-2"
          role="group"
          aria-label="Button group with nested dropdown"
        >
          <div class="btn-group" role="group">
            <button
              id="btnGroupDrop1"
              type="button"
              class="btn btn-secondary dropdown-toggle"
              data-bs-toggle="dropdown"
              aria-haspopup="true"
              aria-expanded="false"
            >
              All times
            </button>
            <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
              <a class="dropdown-item" href="#">Jan 2018</a>
              <a class="dropdown-item" href="#">Dec 2017</a>
              <a class="dropdown-item" href="#">Nov 2017</a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="input-group">
        <div class="input-group-text" id="btnGroupAddon">
          <i class="mi mi-Search" style="top: 0"></i>
        </div>
        <input
          type="text"
          class="form-control"
          placeholder="Search media items..."
          aria-label="Search media items..."
          aria-describedby="btnGroupAddon"
        />
      </div>
    </div>
  </div>
  <div>
    <table class="table table-sm table-hover" id="Table">
      <thead class="thead-light">
        <tr>
          <th scope="col">Title</th>
          <th scope="col" width="20%">Image</th>
          <th scope="col" width="5%">Display</th>
        </tr>
      </thead>
      <tbody class="sortable">
        <tr
          class="sortable-item module-column"
          ng-repeat="product in $ctrl.list.items"
          ng-hide="product.isHidden"
        >
          <td>
            <small>{{product.title}}</small>
          </td>
          <td>
            <img height="50" ng-src="{{product.image}}" />
          </td>
          <td>
            <span class="form-check form-switch">
              <input
                type="checkbox"
                class="form-check-input"
                id="ProductNavs_{{product.id}}"
                ng-model="product.isActived"
                ng-change="$ctrl.activeProduct(product)"
              />
              <label class="form-check-input" for="ProductNavs_{{product.id}}">
              </label>
            </span>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>
